<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery综合操作一</title>
		<script type="text/javascript" src="jquery-3.1.4.js">
		
		</script>
	</head>
	<body>
		
		<div id="div1">
			<h1>国家名字</h1>
			<!--设置初始状态为不显示状态-->
			<div id="div1_1" style="display:none">
				<a href="#">中国</a><br>
				<a href="#">美国</a><br>
				<a href="#">英国</a><br>
			</div>
		</div>
		
		<div id="div2">
			<h1>国家吉祥物</h1>
			<div id="div2_1" style="display:none">
				<a href="#">熊猫</a><br>
				<a href="#">大象</a><br>
				<a href="#">牛</a><br>
			</div>
		</div>
		
		<input type="checkbox" value="1" name="name1"/>刘晨1<br>
		<input type="checkbox" value="2" name="name1"/>刘晨2<br>
		<input type="checkbox" value="3" name="name1"/>刘晨3<br>
		<input type="checkbox" value="4" name="name1"/>刘晨4<br>
		<input type="checkbox" value="5" name="name1"/>刘晨5<br>
		<input type="checkbox" value="6" name="name1"/>刘晨6<br>
		<input type="checkbox" value="7" name="name1"/>刘晨7<br>
		<input type="checkbox" value="8" name="name1"/>刘晨8<br>
		<input type="button" value="全选"/>
		<input type="button" value="全不选"/>
		<input type="button" value="反选"/>
		
		<script type="text/javascript">
			
			// 取同标签下正在响应的部分
			$("h1").click(function(event){
				// 保存此时的点击对象目标
				var $currentclick = $(event.target);
				// 设置其属性为可下拉属性
				$currentclick.next().slideToggle();   
			});
			
			// 同一name可以实现同一管理
			// 全选操作
			$("input[type=button]:eq(0)").click(function(){
				$("input[name=name1]").attr("checked","checked");	
			});
			
			// 全不选操作
			$("input[type=button]:eq(1)").click(function(){
				$("input[name=name1]").removeAttr("checked");
			});
			
			// 反选
			$("input[type=button]:eq(2)").click(function(){
				$("input[name=name1]").each(function(index,domEle){
					var $jq = $(domEle);
					var flag = $jq.attr("checked");
					if(flag){
						$jq.removeAttr("checked");
					}
					else{
						$jq.attr("checked","true");
					}
				});
			});
			
		</script>
	</body>
</html>
